<template>
  <div id="login">
    <!-- <div class="QR">
      <img src="@/static/img/qr.jpg" alt="">
    </div>
    <p>请使用微信扫描二维码登录<br>
“嘿果餐饮”</p> -->
    <Minput ref="shop_id" v-model="shop_id" label='店铺号' placeholder='请输入店铺号' tyoe='number' required></Minput>
    <Minput ref="username" v-model="username" label='帐号' placeholder='请输入密码' type='text' required></Minput>
    <Minput ref="password" v-model="password" label='密码' placeholder='请输入密码' type='password' required></Minput>
    <div class="commit">
      <button @click="login" type="button" class="btn btn-primary btn-block">登录</button>
    </div>
  </div>
</template>
<script>
import Minput from "@/components/Minput";
import { axios } from "@/static/js/utils";
export default {
  name: "login",
  data() {
    return {
      shop_id: "",
      username: "",
      password: ""
    };
  },
  methods: {
    valueDate() {
      let refs = this.$refs;
      let error = false;
      for (let i in refs) {
        if (refs[i].error) {
          error = true;
          break;
        } else {
          error = false;
        }
      }
      return error;
    },
    login() {
      let _this = this;
      if (!this.valueDate()) {
        axios
          .post("login/index", {
            shop_id: _this.shop_id,
            username: _this.username,
            password: _this.password
          })
          .then(res => {
            if (res.data.code) {
              localStorage.setItem("userData", JSON.stringify(res.data.data));
              mui.back();
            }
          });
      }
    }
  },
  components: {
    Minput
  },
  mounted() {
    mui.init({
      beforeback: function() {
        let index = plus.webview.getLaunchWebview();
        mui.fire(index, "reload");
        //返回true，继续页面关闭逻辑
        return true;
      }
    });
  }
};
</script>
<style scoped lang='less'>
#login {
  width: 100vw;
  height: 100vh;
  background-color: #f4f4f4;
  font-family: "Microsoft Yahei";
  box-sizing: border-box;
  padding-top: 10px;
  p {
    text-align: center;
  }
  .commit {
    padding: 15px;
    button {
      padding: 8px 12px;
    }
  }
  .QR {
    text-align: center;
    padding: 20px 0;
    img {
      width: 70%;
    }
  }
}
</style>

